<template>
    <el-row class="tac">
        <el-col :span="24">
            <!-- :default-active="cur_page" 用于设置默认激活的菜单项。-->
             <!-- 和下面的index为几配合使用 -->
            <el-menu :default-active="cur_page" class="el-menu-vertical-demo">
                <!-- 主页 -->
                <el-menu-item index="1" @click="go('/index/')">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">主页</span>
                </el-menu-item>
                <!-- 用户管理 -->
                <el-menu-item index="2" @click="go('/index/users')">
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <!-- 轮播图列表 -->
                <el-menu-item index="3" @click="go('/index/carousel')">
                    <i class="el-icon-picture"></i>
                    <span slot="title">轮播图管理</span>
                </el-menu-item>
                <!-- 添加轮播图 -->
                <el-menu-item index="4" @click="go('/index/add-carousel')">
                    <i class="el-icon-circle-plus-outline"></i>
                    <span slot="title">添加轮播图</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script>
export default {
    data() {
        return {
            //当前在哪个页
            cur_page: '1',
        }
    },
    methods: {
        //前往某个页面
        //target表示目标路由的路径
        go(target) {
            //执行跳转
            this.$router.push(target);
        }
    },
    // 钩子函数，组件创建时就执行
    created() {
        //获取当前路径
        let path = this.$route.path;
        //如果当前访问用户管理页面，当前高亮显示第二个，路径是否包含/users
        if (path.includes('/users')) this.cur_page = '2';
        //如果当前访问轮播图页面，当前高亮显示第三个，路径是否包含/carousel
        if (path.includes('/carousel')) this.cur_page = '3';
        //如果当前添加轮播图页面，当前高亮显示第四个判断，路径是否包含
        if (path.includes('/add-carousel')) this.cur_page = '4';//add-carousel
    }
}
</script>